<script setup lang="ts">
  import { reactive, ref, watch } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  import { Upload } from '/@/components/Upload';
  import type { FileItem } from '/@/components/Upload';
  import { Message } from '@arco-design/web-vue';
  import { updateUser } from '/@/api/user';

  const userStore = useUserStore();

  console.log(userStore.userInfo);

  const form = reactive({
    name: userStore.userInfo?.name,
    occupation: userStore.userInfo?.occupation,
    company: userStore.userInfo?.company,
    introduce: userStore.userInfo?.introduce,
    icon: userStore.userInfo?.icon,
  });
  console.log(form);

  const handleSubmit = async ({ values, errors }) => {
    console.log(values.value);

    console.log(errors);

    await updateUser(values);
    Message.success('修改成功！');
  };
  const fileList = ref<FileItem[]>([]);

  watch(fileList, () => {
    form.icon = fileList.value?.[0]?.url || '';
  });
</script>

<template>
  <div>
    <a-card :bordered="false" class="h-[650px]">
      <div class="text-[#333] text-[20px] font-[600]">个人资料</div>
      <!-- <div>个人资料页面 {{ userStore.userInfo?.name }}</div> -->
      <a-row :offset="10">
        <a-col :span="15">
          <a-form ref="formRef" size="large" :model="form" class="mt-[25px]" @submit="handleSubmit">
            <a-form-item
              field="name"
              label="用户名"
              :rules="[{ required: true, message: '用户名' }]"
            >
              <a-input v-model="form.name" placeholder="请输入用户名" />
            </a-form-item>
            <a-form-item field="occupation" label="职业">
              <a-input v-model="form.occupation" placeholder="请输入职业" />
            </a-form-item>
            <a-form-item field="company" label="组织/公司">
              <a-input v-model="form.company" placeholder="请输入组织/公司" />
            </a-form-item>
            <a-form-item field="introduce" label="个性签名">
              <a-textarea
                v-model="form.introduce"
                placeholder="请输入个性签名"
                :auto-size="{
                  minRows: 8,
                }"
                :max-length="100"
                allow-clear
                show-word-limit
              />
            </a-form-item>
            <a-form-item class="mt-[30px]">
              <a-space>
                <a-button type="primary" html-type="submit">保存修改</a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="9" class="text-center">
          <Upload v-model:file-list="fileList" class="m-[0]" />

          <div class="text-[14px] text-[#1d2129] font-[500] mt-[10px]">我的头像</div>
          <a-row>
            <a-col :span="12" :offset="6" class="text-[12px] text-[#86909c] font-[400] mt-[10px]">
              支持 jpg、png、 jpeg 格式大小 5M 以内的图片</a-col
            >
          </a-row>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
